<template>
    <div>
<table border="1" width="400" align="center">
    <caption>前端语言列表</caption>
    <tbody>
    <tr>
        <td>序号</td>
        <td>内容</td>
    </tr>
    <tr v-for="(item,index) in list" :key="index">
        <td>{{index+1}}</td>
        <td>{{item}}</td>
    </tr>
    </tbody>
</table>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
            list:["Html","CSS","JS","Vue","Bootstrap"]
        })
    
        return {
            ...toRefs(state),
        }
    }
}
</script>

<style lang="scss" scoped>

</style>